<template>
  <div v-if="role"  :class="[colorType =='dark'? $style.homeDark:$style.home] ">
    <!-- <div :class="$style.taband" >
      <div :class="[$style.tabitem, tabCheck==1? $style.tabcheck : '']" @click="chenkSiteType(1)">自营站点</div>
      <div :class="[$style.tabitem, tabCheck==2? $style.tabcheck : '']" @click="chenkSiteType(2)">加盟站点</div>
    </div> -->
      
        <!-- <p>欢迎进入中装天如管理系统！</p> -->
    <div v-if="chart1" :class="$style.searbox">
          <div style="color:gray;display: flex;align-items: center;padding: 16px 10px;flex-wrap: wrap;">
            <div :span="6" :class="$style.selectBox" style="margin: 0 10px">
              <div class="chart-sear">
              <!-- <label>站点：</label> -->
              <el-select 
              filterable
              v-model="siteId"
              @change="changeCheck"
              placeholder="选择站点">
              <el-option label="全部" value=""></el-option>
                <el-option
                  v-for="item in iotList"
                  :key="item.value"
                  :label="item.name"  
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            </div>
            <div :span="6">
              <div :class="$style.selectBox">
              <!-- <label>运营商：</label> -->
              <el-select
                style="width:160px"
                v-model="api"
                clearable
                @change="changeSearch(api)"
                placeholder="运营商"
              >
              <el-option label="全部" value=""></el-option>
                <el-option v-for="item in company" :key="item.id" :label="item.name" :value="item.id"></el-option>
                
              </el-select>
            </div>
            </div>
            <div :class="$style.selectBox" style="margin-right:20px;display: flex;align-items: center;">
              <!-- <label>时间：</label> -->
              <el-date-picker
                v-model="time"
                type="date"
                @change="changeCheck"
                :picker-options='pickerOptions'
                value-format="yyyy-MM-dd"
                placeholder="选择时间">
              </el-date-picker>
            </div>
        <div :span="12" style="text-align: right;">
          <el-button type="success" plain v-if="colorType == 'dark'" style="margin-left: 12px;" @click="checkColorType('')">深色模式</el-button>
          <el-button type="info" plain v-else @click="checkColorType('dark')">深色模式</el-button>
          <el-button type="default" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          <!-- <el-button type="primary" icon="el-icon-search">查询</el-button> -->
        </div>
      </div>
        </div>

        <!-- 今日充电统计 -->
        <div class="amoutday" style="display: flex;margin-top: 10px;justify-content: space-between;" >
          <!-- <div :class="$style.chartboxs" style="">
            <p :class="$style.titlechart">今日订单量</p>
            <p :class="$style.markchart">今日0:00-24:00创建的订单量（单）</p>
            <p :class="$style.amoutschart">234</p>
            <div :class="$style.chartcir" ref="orderChart" >
            </div>
            <div :class="$style.contentchart">
              <div :class="$style.contentrow">
                <p :class="$style.headerchart"> <span :class="$style.prixchart" style="background-color:#91cc75"></span> 充电中</p>
                <p :class="$style.win">1.03%</p>
                <p>2单</p>
              </div>
              <div :class="$style.contentrow">
                <p :class="$style.headerchart"> <span :class="$style.prixchart" style="background-color:#fac858"></span> 待支付</p>
                <p :class="$style.win">22%</p>
                <p>23单</p>
              </div>
              <div :class="$style.contentrow">
                <p :class="$style.headerchart"> <span :class="$style.prixchart" style="background-color:#73c0de"></span> 已支付</p>
                <p :class="$style.win">78%</p>
                <p>125单</p>
              </div>
            </div>
          </div> -->
          <div v-if="chart1" :class="[$style.chartboxs,colorType =='dark'? $style.dark:$style.day]" style="width: 41%;padding-right: 5%;min-width: 330px;">
            
            <div style="display:flex;align-items:center">
              <div>
                <div :class="[$style.titlechart]">{{chartName1}}</div>
                <div :class="[$style.flexTitle]">
                  <el-switch
                        style="display: block"
                        v-model="gourpType"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="chargeChartFn"
                        active-text="运营商"
                        inactive-text="站点">
                    </el-switch>
                </div>
                <div :class="$style.markchart"></div>
                <div :class="$style.amoutschart" style="margin-bottom:38px">
                  <span>{{apiTotal}} <span :class="$style.du" style="font-size: 11px">度</span> </span>
                  <div :class="$style.amoutschartmin">
                    <span style="height:20px">电费：{{totalPower}}元</span>
                    <span style="height:20px">服务费：{{totalService}}元</span>
                    <span style="height:20px">共计：{{totalAmout}}元</span>
                  </div>
                </div>
              </div>
            <!-- <div :class="$style.amoutschart" style="padding: 18px 4px 0 4px;">{{apiTotal}}</div> -->
              
            </div> 
            <div :class="$style.chartcir" style="height:264px;width:264px;margin-left: 15%;" ref="chargeChart" >
              </div>  
            <div :class="[$style.contentchart]">
              <div :class="[$style.contentrow, $style.chargelist ]" v-for="(item, index) in chartData" :key="index">
                <div :class="$style.headerchart"> <span :class="$style.prixchart" :style="{'background-color':item.color}"></span><span :class="$style.sitename">{{index+1}}.{{item.name}}</span></div>
                <div :class="$style.win">{{ setPercent(apiTotal, item.value) }}%</div>
                <div style="width:80px" :class="$style.site-ele">{{item.value}}度</div>
                <div style="width:100px"> <span style="font-weight:bold;padding-left:5px">{{item.singelData}}</span>度/单枪</div>
              </div>
            </div>
          </div>
          <div v-if="chart2" :class="[$style.chartboxs,colorType =='dark'? $style.dark:$style.day]" style="min-width: 450px;">
            <div :class="$style.titlechart">充电枪状态</div>
            <div :class="$style.markchart">今日0:00-24:00充电枪状态</div>
            <div :class="$style.amoutschart" style="padding: 18px 4px;justify-content: flex-start;flex-direction: row;"> 
              <div style="display: flex;flex-direction: column;align-items: center;height:100%;justify-content: space-between;"> {{gunTotal}}<span style="font-size: 13px;color:#898989">总枪数</span></div>
              <div style="display: flex;flex-direction: column;align-items: center;margin-left: 20px"> {{usePercent}}<span style="font-size: 13px;color:#898989">枪使用率(%)</span>
                <span style="font-size: 13px;color:#898989;margin-top: 4px">{{useText}}</span>
              </div>
            </div>
            <!-- <div :class="$style.chartcir" ref="gunChart" style="">

            </div> -->
            <div :class="$style.totalStateitag">
              <div :class="$style.StateItem" v-for="(item, index) in gunList" :key="index">
                <div :class="$style.StateItemColor"> <span :class="[$style.prixchart, $style.colorState,'gun'+item.state]" :style="{'background-color':item.color}"></span> {{item.name}}</div>
                <div>(<span >{{item.total}}</span>)</div>
            </div>
            </div>
            <div :class="[$style.contentchart1]">
              <div :class="$style.table">
                <!-- <div v-for="(item, index) in siteGunState" :key="index"  :class="[colorType =='dark' ? $style.stateDark:$style.stateday]">
                    <div  v-if="index % 2 == 0" :class="[$style.tr,colorType =='dark'? $style.stateDark:$style.stateDouble]" >
                      <a :title="item.siteName" :href="item.url" :class="[$style.td ,colorType =='dark'? $style.aDark:$style.aDay]">{{index+1}}.{{item.siteName}}</a>
                      <div  v-for="(val, keys) in item.state" :key="keys" :class="$style.stateTaol">
                        <div :class="$style.state" :style="{'background-color':val.color}"></div>
                        <div>{{val.total}}</div>
                      </div>
                    </div>
                    <div  v-else :class="[$style.tr,colorType =='dark'? $style.statesDark:$style.statesingel]" >
                      <a :title="item.siteName" :href="item.url" :class="[$style.td ,colorType =='dark'? $style.aDark:$style.aDay]">{{index+1}}.{{item.siteName}}</a>
                      <div :class="$style.stateTaol" v-for="(val, keys) in item.state" :key="keys">
                        <div :class="$style.state" :style="{'background-color':val.color}"></div>
                        <div>{{val.total}}</div>
                      </div>
                    </div>
                  </div> -->
                  <!-- <div  :class="[colorType =='dark' ? $style.stateDark:$style.stateday, $style.tr]">
                    <a  :class="[$style.td ,colorType =='dark'? $style.aDark:$style.aDay]">名称</a>
                    <div :class="$style.stateTaol">闲</div>
                  </div> -->
                  <div :class="[colorType =='dark' ? $style.stateDark:$style.stateday]">
                    <div  :class="[$style.tr,colorType =='dark'? $style.stateDark:$style.stateDouble]" >
                      <a :class="[$style.td ,colorType =='dark'? $style.aDark:$style.aDay]">站点</a>
                      <div  v-for="(val, keys) in colors" :key="keys" :class="$style.stateTaol">
                        <div :class="$style.state" :style="{'background-color':val}"></div>
                      </div>
                    </div>
                  </div>
                  <div v-for="(value, k) in siteGunState" :key="k"  >
                    <div style="font-size: 14px;display:flex;align-items:center;padding:8px 0"> <span :class="$style.stateLine"></span>{{ k }}</div>
                    <div v-for="(item, index) in value" :key="index" :class="[colorType =='dark' ? $style.stateDark: $style.stateday]">
                      <div  v-if="index % 2 == 0" :class="[$style.tr,colorType =='dark'? $style.stateDark:$style.stateDouble]" >
                        <div :class="[$style.td  ]">
                          <a :class="[item.siteName.length >8 ? $style.anat : '',colorType =='dark'? $style.aDark:$style.aDay]" :title="item.siteName" :href="item.url" >{{index+1}}.{{item.siteName}}</a>
                        </div>
                        <div  v-for="(val, keys) in item.state" :key="keys" :class="$style.stateTaol">
                          <div v-if="val.total" :class="$style.state" :style="{'background-color':val.color}"></div>

                          <div v-if="val.total">{{val.total}}</div>
                          <div v-else>-</div>
                        </div>
                      </div>
                      <div  v-else :class="[$style.tr,colorType =='dark'? $style.statesDark:$style.statesingel]" >
                        <div :class="[$style.td ]">
                          <a  :class="[item.siteName.length >8 ? $style.anat : '',colorType =='dark'? $style.aDark:$style.aDay]" :title="item.siteName" :href="item.url" >{{index+1}}.{{item.siteName}}</a>
                        </div>
                        <div :class="$style.stateTaol" v-for="(val, keys) in item.state" :key="keys">
                          <div v-if="val.total" :class="$style.state" :style="{'background-color':val.color}"></div>
                          <div v-if="val.total">{{val.total}}</div>
                          <div v-else>-</div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div v-if="totalAmout == 99 && chart1" :class="[$style.chartboxs,colorType =='dark'? $style.dark:$style.day]" style="min-width: 330px;">
            <div :class="$style.titlechart">今日营收</div>
            <div :class="$style.markchart">订单金额(元)</div>
            <div :class="$style.amoutschart" style="padding: 18px 4px;">
              <span>{{totalAmout}}</span>
              <div :class="$style.amoutschartmin">
                <span>电费：{{totalPower}}元</span>
                <span>服务费：{{totalService}}元</span>
              </div>
            </div>
            <div :class="$style.chartcir" ref="cashChart" >

            </div>
            <div :class="$style.contentchart">
              <div :class="$style.contentrow"  v-for="(item, index) in orderData" :key="index">
                <div :class="$style.headerchart"> <span :class="$style.prixchart" :style="{'background-color':item.color}"></span> <span :class="$style.sitename">{{item.name}}</span></div>
                <div :class="$style.win">{{ setPercent(totalAmout, item.value) }}%</div>
                <div> <span style="font-weight:bold;padding-left:5px">{{item.singelData}}</span>度/单枪</div>
                <!-- <div>{{item.value}}元</div> -->
              </div>
            </div>
          </div>
          <div v-if="chart1" :class="[$style.chartboxs,colorType =='dark'? $style.dark:$style.day]" style="min-width: 230px;">
            <div :class="$style.titlechart">{{chartName2}}</div>
            <div :class="$style.markchart"></div>
            <div :class="$style.amoutschart" style="padding: 18px 4px;">{{apiTotal}}</div>
            <div :class="$style.chartcir" ref="waveChart" >

            </div>
            <div :class="$style.contentchart">
              <div :class="$style.contentrow" v-for="(item, index) in waveData" :key="index">
                <div :class="$style.headerchart"> <span :class="$style.prixchart" :style="{'background-color':item.color}"></span>{{item.name}}</div>
                <div :class="$style.win">{{ setPercent(apiTotal, item.value) }}%</div>
                <div>{{item.value}}度</div>
              </div>
            </div>
          </div>
          
        </div>

        <div v-if="chart1" :class="[$style.amoutcharge, colorType =='dark'? $style.amoutchargeDark:$style.amoutchargeDay]" style="margin-top: 10px;padding: 20px 0">
          <div :class="$style.searchbtn" style=" width: 100%;display: flex;justify-content: flex-end;;padding: 20px  0">
            <el-button :type="types==1 ?'danger':'default'" @click="checkType(1)" :disabled="true">今日</el-button>
            <el-button :type="types==2 ?'danger':'default'"  @click="checkType(2)">近30天</el-button>
            <el-button :type="types==3 ?'danger':'default'" @click="checkType(3)">上月</el-button>
            <el-button :type="types==4 ?'danger':'default'" @click="checkType(4)">本月</el-button>
            <el-button :type="types==5 ?'danger':'default'" @click="checkType(5)">近12月</el-button>
          </div>
          <div style="height:350px;width:99%;min-width:990px;margin-top: 20px;background: #fff;padding: 20px 0 5px 0;border-radius: 4px;" id="myChart" ref="mixChart"></div>
          <div style="height:350px;width:99%;min-width:990px;margin-top: 20px;background: #fff;padding: 20px 0 5px 0;border-radius: 4px;" id="waveHistory" ref="waveHistory"></div>
          <div style="height:20px;width:99%;min-width:990px;text-align: center;font-size:13px;background: #fff;">备注：当前图表只在选在单站点时显示“单枪电量”，全站单枪指标功能正在开发中...；上升和下降百分比=(前一日/月单枪电量) / (当日/月单枪电量)</div>
        </div>
        <!-- <div style="height:300px;width:300px;min-width:990px" id="circular"></div> -->
    
  </div>
  <div v-else>
    <div class="title">欢迎使用中天充电后台管理</div>
  </div>
</template>

<script>
import Panel from '@/components/Panel'
import MiniPanel from '@/components/MiniPanel'
// import thirdHome from '@/views/Home/thirdHome.vue'
// import moment from 'moment'
// import { GET } from '@/tools'
import request from '@/tools/request.js'
function compare(property,desc) {
                return function (a, b) {
                    var value1 = a[property];
                    var value2 = b[property];
                    if(desc==true){
                        // 升序排列
                        return value1 - value2;
                    }else{
                        // 降序排列
                        return value2 - value1;
                    }
                }
            }
export default {
  name: "home",
  inject:['reload'],  //注入依赖
  data() {
    return {
      tabCheck: 1,
      chart1: true,
      chart2: true,
      siteType: [1,9],
      //
      appointmentTime: [new Date().getTime(), new Date().getTime()],
      time:'',
      role: true,
      thirdSites:[], //互联互通站点数量统计，用于单枪电量统计
      //深色
      colorType:'',
      darkBack:'#100c2a',
      homePageData: {},
      company:[],
      date: '',
      iotList: [],
      begin: "",
      end: "",
      api: '',
      siteId:'',
      singelSiteGun: 0,
      chartName1:'今日充电量',
      chartName2:'谷峰平尖段电量',
      chartName3:'充电数据',
      chartName4:'谷峰平尖电量',
      chartName5: '近30天充电数据',
      chartName6: '近30天谷峰平尖电量',
      useText:'',
      rangName:'',
      siteName:'',
      thirdName:'',
      groups:["date"],
      dateList: [],
      gourpType:true, // true站点 false：运营商
      colors :["#91cc75","#73c0de","#ea7ccc","#f73939","#fac858",'#ab6060',"#9a60b4","#eb7a1e","#bfbfbf"],
// item.color =  item.state == 4? '#f73939': item.state == 5? '#fac858': item.state == 6? '#ab6060': item.state == 7? '#9a60b4': item.state == 8? '#eb7a1e':'#bfbfbf'
      totalAmount:[],
      ele:[],
      eleAmount:[],
      
      service: [],
      average: [],
      timeDate:[],
      maxY:0,
      maxY1:0,
      onlyY:0,
      onlyY1:0,
      types: 2,
      // todayGroups: ['date'],
      gunState:[],//枪状态
      gunList: [],
      siteGunState: [],
      siteMount: [],//站点枪数量
      gunTotal:0,
      usePercent: 0,

      totalAmout: 0,//营收
      totalPower:0,
      totalService:0,
      orderData:[],

      eletri:{},//今日充电量
      today: '',
      day: '',
      apiTotal: 0,
      chartData:[],
      charTotal:0,

      waveData:[],
      guData: [],
      fengData: [],
      jianData: [],
      pingData: [],
      singelCharge: [],
      exSiteData:[
     
    ],
    pickerOptions: {
          disabledDate(time) {
            let curDate = new Date();
            let three = 30 * 24 * 3600 * 1000;
            return (
             
              time > curDate.getTime() ||
              time < new Date(curDate.getTime() - three)
            );
            return time.getTime() > Date.now();
          }
        },
    }
  },
  components: {
    Panel,
    MiniPanel,
  },
  computed: {
    todayGroups () {
      let groups = ['date']
      // if(this.siteId){
      //   groups.push('site')
      // }
      if(!this.api){
       groups.push('api') 
      }
         return  groups
    },
    ismOrpc() {
			    return this.$store.getters.ismOrpc;
			},
  },
  methods:{
    beforeRouteLeave(to, from, next) {
      to.meta.keepAlive = true;
      next(0);
    },
    refresh () {
      // this.setDate(1)
      // this.checkType()
      // this.companyTh()
      if(!this.role){
        return false
      }
      // this.gunChartFn()
      // this.gunChartSite()
      // this.getAmout()
      // this.getIot()
      // this.getThirdSite()
      this.reload(); //所有页面刷新
    },
   
    checkColorType(val){
      this.colorType = val ? val : ''
      window.localStorage.setItem('colorType',this.colorType)
      window.localStorage.setItem('gourpType',this.gourpType)
      this.reload();
      // this.getAmout()
      // this.chargeChartFn()
      // this.cashChartFn()
    },

    //图4 图5-----------------------------------------------start
    //充电量统计数据获取，获取图4图5数据，------第一步
    async getAmout (){
      console.log('getAmout')
      this.chartName5 = this.rangName+this.thirdName+this.siteName+'充电数据'
      this.chartName6 = this.rangName+this.thirdName+this.siteName+'谷峰平尖电量'
      let begin = this.begin, end = this.end, api = this.api,groups = this.groups, siteId = this.siteId
      var result =await request({
        url: '/order/count/statistics/day',
        method:"POST",
        data:{begin, end, api, groups, siteId, typeList: this.siteType}
      })
    //  var result = {"msg":"success","code":0,"counts":[{"amount":1064.74,"chargeNum":42,"chargeSuccess":50,"chargeTime":174110,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":1612.840,"electricityFen":40.520,"electricityGu":555.720,"electricityJian":627.860,"electricityPing":388.740,"hid":510107,"powerPrice":665.12,"receivedPowerPrice":665.12,"receivedServicePrice":399.62,"servicePrice":714.44,"siteId":7,"siteName":"中装天如长虹科技大厦地下室充电站","surcharge":4.65},{"amount":2693.06,"chargeNum":142,"chargeSuccess":154,"chargeTime":478430,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4307.817,"electricityFen":19.225,"electricityGu":1783.420,"electricityJian":1955.782,"electricityPing":549.390,"hid":510106,"powerPrice":1656.64,"receivedPowerPrice":1656.64,"receivedServicePrice":1036.42,"servicePrice":1796.64,"siteId":8,"siteName":"中装天如银海中心一期充电站","surcharge":26.55},{"amount":2474.82,"chargeNum":137,"chargeSuccess":141,"chargeTime":418806,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":3981.181,"electricityFen":109.771,"electricityGu":1314.858,"electricityJian":1925.924,"electricityPing":630.628,"hid":510107,"powerPrice":1519.38,"receivedPowerPrice":1519.38,"receivedServicePrice":955.44,"servicePrice":1788.10,"siteId":10,"siteName":"中装天如长虹科技大厦地面充电站","surcharge":48.60},{"amount":1807.44,"chargeNum":99,"chargeSuccess":109,"chargeTime":341168,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2942.570,"electricityFen":29.170,"electricityGu":1261.770,"electricityJian":1376.750,"electricityPing":274.880,"hid":510106,"powerPrice":1101.22,"receivedPowerPrice":1101.22,"receivedServicePrice":706.22,"servicePrice":1263.73,"siteId":11,"siteName":"中装天如鹭岛艺术城一期充电站","surcharge":3.60},{"amount":3567.71,"chargeNum":197,"chargeSuccess":203,"chargeTime":581996,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":5477.171,"electricityFen":164.504,"electricityGu":2187.769,"electricityJian":2301.466,"electricityPing":823.432,"hid":510105,"powerPrice":2252.38,"receivedPowerPrice":2252.38,"receivedServicePrice":1315.33,"servicePrice":2277.63,"siteId":13,"siteName":"中装天如富力广场一期充电站","surcharge":14.55},{"amount":2280.52,"chargeNum":114,"chargeSuccess":132,"chargeTime":419616,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":3742.758,"electricityFen":79.675,"electricityGu":1535.048,"electricityJian":1629.912,"electricityPing":498.123,"hid":510107,"powerPrice":1376.25,"receivedPowerPrice":1376.25,"receivedServicePrice":904.27,"servicePrice":1668.57,"siteId":15,"siteName":"中装天如万达广场地下室充电站","surcharge":12.30},{"amount":2821.99,"chargeNum":146,"chargeSuccess":168,"chargeTime":537960,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4947.133,"electricityFen":59.598,"electricityGu":2406.689,"electricityJian":2208.871,"electricityPing":271.975,"hid":510105,"powerPrice":1634.06,"receivedPowerPrice":1634.06,"receivedServicePrice":1187.93,"servicePrice":2091.42,"siteId":16,"siteName":"中装天如鹏瑞利青羊广场一期充电站","surcharge":50.55},{"amount":15.79,"chargeNum":2,"chargeSuccess":1,"chargeTime":8655,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":15.040,"electricityFen":0.000,"electricityGu":0.000,"electricityJian":0.000,"electricityPing":15.040,"hid":510105,"powerPrice":8.27,"receivedPowerPrice":8.27,"receivedServicePrice":7.52,"servicePrice":7.52,"siteId":17,"siteName":"中装天如航天佳苑充电站","surcharge":0.00},{"amount":38.44,"chargeNum":0,"chargeSuccess":1,"chargeTime":17070,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":33.430,"electricityFen":0.000,"electricityGu":0.000,"electricityJian":0.000,"electricityPing":33.430,"hid":510107,"powerPrice":26.74,"receivedPowerPrice":26.74,"receivedServicePrice":11.70,"servicePrice":11.70,"siteId":18,"siteName":"中装天如珑熙珺充电站","surcharge":0.00},{"amount":2536.07,"chargeNum":124,"chargeSuccess":140,"chargeTime":441229,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4103.248,"electricityFen":31.630,"electricityGu":1778.866,"electricityJian":1860.446,"electricityPing":432.306,"hid":510105,"powerPrice":1548.69,"receivedPowerPrice":1548.69,"receivedServicePrice":987.38,"servicePrice":1743.91,"siteId":19,"siteName":"中装天如饰海金沙充电站","surcharge":12.00},{"amount":2968.32,"chargeNum":157,"chargeSuccess":166,"chargeTime":520820,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4632.104,"electricityFen":72.407,"electricityGu":1976.863,"electricityJian":1889.235,"electricityPing":693.599,"hid":510124,"powerPrice":1855.82,"receivedPowerPrice":1855.82,"receivedServicePrice":1112.50,"servicePrice":2023.93,"siteId":20,"siteName":"中装天如百伦广场充电站","surcharge":2.55},{"amount":2888.46,"chargeNum":167,"chargeSuccess":177,"chargeTime":529164,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4809.654,"electricityFen":17.747,"electricityGu":2137.259,"electricityJian":2355.894,"electricityPing":298.754,"hid":510107,"powerPrice":1718.47,"receivedPowerPrice":1718.47,"receivedServicePrice":1169.99,"servicePrice":2057.47,"siteId":21,"siteName":"中装天如和雅嘉御充电站","surcharge":34.65},{"amount":2596.15,"chargeNum":140,"chargeSuccess":149,"chargeTime":441667,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4178.236,"electricityFen":39.852,"electricityGu":1734.987,"electricityJian":1941.519,"electricityPing":461.878,"hid":510106,"powerPrice":1593.29,"receivedPowerPrice":1593.29,"receivedServicePrice":1002.86,"servicePrice":1724.78,"siteId":22,"siteName":"中装天如鹭岛艺术城二期充电站","surcharge":6.75},{"amount":4284.38,"chargeNum":284,"chargeSuccess":269,"chargeTime":707288,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":6473.673,"electricityFen":265.763,"electricityGu":2537.008,"electricityJian":2687.355,"electricityPing":983.547,"hid":510108,"powerPrice":2711.02,"receivedPowerPrice":2711.02,"receivedServicePrice":1573.36,"servicePrice":2783.58,"siteId":23,"siteName":"中装天如鹏瑞利广场一期充电站","surcharge":19.65},{"amount":1255.13,"chargeNum":74,"chargeSuccess":81,"chargeTime":219950,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":1921.919,"electricityFen":65.984,"electricityGu":817.963,"electricityJian":752.505,"electricityPing":285.467,"hid":510108,"powerPrice":793.89,"receivedPowerPrice":793.89,"receivedServicePrice":461.24,"servicePrice":807.45,"siteId":24,"siteName":"中装天如鹏瑞利广场二期充电站","surcharge":3.60},{"amount":70.71,"chargeNum":1,"chargeSuccess":6,"chargeTime":91292,"comboPowerPrice":0.00,"comboServicePrice":39.91,"date":"24-03-04","electricity":168.290,"electricityFen":0.000,"electricityGu":168.290,"electricityJian":0.000,"electricityPing":0.000,"hid":510124,"powerPrice":40.38,"receivedPowerPrice":40.38,"receivedServicePrice":70.24,"servicePrice":70.24,"siteId":25,"siteName":"中装天如龙城国际(1.2.3期)交流充电站","surcharge":0.00},{"amount":2859.11,"chargeNum":162,"chargeSuccess":171,"chargeTime":503882,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4593.393,"electricityFen":26.356,"electricityGu":1995.552,"electricityJian":2014.854,"electricityPing":556.631,"hid":510106,"powerPrice":1756.64,"receivedPowerPrice":1756.64,"receivedServicePrice":1102.47,"servicePrice":1972.32,"siteId":28,"siteName":"中装天如银海中心二期充电站","surcharge":3.00},{"amount":62.59,"chargeNum":3,"chargeSuccess":4,"chargeTime":42727,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":67.550,"electricityFen":0.000,"electricityGu":48.690,"electricityJian":0.000,"electricityPing":18.860,"hid":510124,"powerPrice":22.07,"receivedPowerPrice":22.07,"receivedServicePrice":40.52,"servicePrice":40.52,"siteId":30,"siteName":"中装天如龙城国际共享交流充电站","surcharge":0.00},{"amount":2917.39,"chargeNum":143,"chargeSuccess":165,"chargeTime":482624,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4619.799,"electricityFen":81.515,"electricityGu":2381.629,"electricityJian":1614.670,"electricityPing":541.985,"hid":510104,"powerPrice":1801.89,"receivedPowerPrice":1801.89,"receivedServicePrice":1115.50,"servicePrice":2054.52,"siteId":31,"siteName":"中装天如五八西部中心充电站","surcharge":8.70},{"amount":2628.46,"chargeNum":147,"chargeSuccess":169,"chargeTime":472895,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4425.717,"electricityFen":38.638,"electricityGu":2112.346,"electricityJian":2073.460,"electricityPing":201.273,"hid":510108,"powerPrice":1567.78,"receivedPowerPrice":1567.78,"receivedServicePrice":1060.68,"servicePrice":1861.80,"siteId":32,"siteName":"中装天如朗基城充电站","surcharge":6.45},{"amount":1504.65,"chargeNum":85,"chargeSuccess":92,"chargeTime":273513,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2494.466,"electricityFen":46.377,"electricityGu":983.602,"electricityJian":1158.432,"electricityPing":306.055,"hid":510107,"powerPrice":904.89,"receivedPowerPrice":904.89,"receivedServicePrice":599.76,"servicePrice":1095.06,"siteId":34,"siteName":"中装天如万达广场地面充电站","surcharge":1.05},{"amount":1358.81,"chargeNum":70,"chargeSuccess":77,"chargeTime":266152,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2294.921,"electricityFen":26.183,"electricityGu":1031.500,"electricityJian":984.269,"electricityPing":252.969,"hid":510105,"powerPrice":807.12,"receivedPowerPrice":807.12,"receivedServicePrice":551.69,"servicePrice":981.09,"siteId":35,"siteName":"中装天如鹏瑞利青羊广场二期充电站","surcharge":6.00},{"amount":1626.35,"chargeNum":77,"chargeSuccess":92,"chargeTime":333514,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2804.592,"electricityFen":0.725,"electricityGu":1613.315,"electricityJian":1116.729,"electricityPing":73.823,"hid":510124,"powerPrice":955.04,"receivedPowerPrice":955.04,"receivedServicePrice":671.31,"servicePrice":1205.76,"siteId":37,"siteName":"中装天如龙城国际充电站","surcharge":2.25},{"amount":3656.65,"chargeNum":202,"chargeSuccess":230,"chargeTime":700544,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":6464.348,"electricityFen":10.345,"electricityGu":3098.963,"electricityJian":2987.120,"electricityPing":367.920,"hid":510115,"powerPrice":2092.97,"receivedPowerPrice":2092.97,"receivedServicePrice":1563.68,"servicePrice":2718.46,"siteId":38,"siteName":"中装天如海天腾逸充电站","surcharge":46.35},{"amount":3058.58,"chargeNum":177,"chargeSuccess":183,"chargeTime":532045,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4850.103,"electricityFen":120.953,"electricityGu":1895.170,"electricityJian":2052.495,"electricityPing":781.485,"hid":510102,"powerPrice":1900.90,"receivedPowerPrice":1900.90,"receivedServicePrice":1157.68,"servicePrice":2048.10,"siteId":39,"siteName":"中装天如公共服务停车场","surcharge":57.75},{"amount":1776.93,"chargeNum":113,"chargeSuccess":123,"chargeTime":341705,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":3073.021,"electricityFen":43.166,"electricityGu":1425.929,"electricityJian":1463.533,"electricityPing":140.393,"hid":510108,"powerPrice":1039.41,"receivedPowerPrice":1039.41,"receivedServicePrice":737.52,"servicePrice":1312.12,"siteId":40,"siteName":"中装天如鹏瑞利广场三期充电站","surcharge":1.20},{"amount":1810.10,"chargeNum":87,"chargeSuccess":100,"chargeTime":304792,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2876.198,"electricityFen":46.976,"electricityGu":1126.976,"electricityJian":1215.092,"electricityPing":487.154,"hid":510102,"powerPrice":1119.01,"receivedPowerPrice":1119.01,"receivedServicePrice":691.09,"servicePrice":1274.12,"siteId":41,"siteName":"中装天如通威国际中心充电站","surcharge":68.70},{"amount":1569.52,"chargeNum":72,"chargeSuccess":85,"chargeTime":288724,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2709.699,"electricityFen":63.093,"electricityGu":1465.694,"electricityJian":1087.387,"electricityPing":93.525,"hid":510106,"powerPrice":923.03,"receivedPowerPrice":923.03,"receivedServicePrice":646.49,"servicePrice":1194.22,"siteId":42,"siteName":"中装天如金域西岭充电站","surcharge":1.35},{"amount":2698.78,"chargeNum":135,"chargeSuccess":158,"chargeTime":534492,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4974.160,"electricityFen":15.088,"electricityGu":2457.736,"electricityJian":2254.282,"electricityPing":247.054,"hid":510106,"powerPrice":1504.97,"receivedPowerPrice":1504.97,"receivedServicePrice":1193.81,"servicePrice":2296.03,"siteId":43,"siteName":"中装天如时代天境停车场充电站","surcharge":4.05},{"amount":1155.87,"chargeNum":51,"chargeSuccess":64,"chargeTime":226546,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":1914.615,"electricityFen":22.574,"electricityGu":1123.332,"electricityJian":629.868,"electricityPing":138.841,"hid":510112,"powerPrice":699.88,"receivedPowerPrice":699.88,"receivedServicePrice":455.99,"servicePrice":901.57,"siteId":45,"siteName":"中装天如滨河综合市场充电站","surcharge":0.00},{"amount":2923.49,"chargeNum":120,"chargeSuccess":153,"chargeTime":542152,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4781.494,"electricityFen":121.795,"electricityGu":2508.553,"electricityJian":1856.784,"electricityPing":294.362,"hid":510107,"powerPrice":1776.98,"receivedPowerPrice":1776.98,"receivedServicePrice":1146.51,"servicePrice":2039.12,"siteId":46,"siteName":"中装天如桂龙公园充电站","surcharge":0.00},{"amount":2673.79,"chargeNum":130,"chargeSuccess":157,"chargeTime":463321,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4372.322,"electricityFen":27.836,"electricityGu":1901.654,"electricityJian":2019.039,"electricityPing":423.793,"hid":510108,"powerPrice":1620.21,"receivedPowerPrice":1620.21,"receivedServicePrice":1053.58,"servicePrice":1834.28,"siteId":47,"siteName":"中装天如成华公园充电站","surcharge":0.00}]}
      // console.log('统计-----',result)
      let maxY = 0 , maxY1 = 0
      let thirdSites = this.thirdSites
      result.counts.map(item => {
        let shi = item.chargeTime ? (item.chargeTime/3600).toFixed(2) :0
        item.chargeTime = shi
        if(item.electricity > maxY){
          maxY = item.electricity +2000
        }
        if(item.amount > maxY1){
          maxY1 = item.amount
        }
        //计算单枪电量 = 日总电量 / 站点枪数量；保留两位小数，目前供公司总枪数量统计不准确，只计算单站单枪电量
        item.singelCharge = 0
        if(this.siteId){
          item.singelCharge = (item.electricity /this.singelSiteGun).toFixed(0)
        }else{
          // if(this.api){
          //   console.log('api单枪电量',this.api)
          //   thirdSites.map(item => {
          //     if(item.id == this.api){
          //       item.singelCharge = (item.electricity /item.allNum).toFixed(0)
          //     }
          //   })
          // }
        }
        return item
      })
      this.maxY = maxY == 0 ? 200 :  Math.ceil(maxY/5 +50)*5 
      this.maxY1 = maxY1 == 0 ? 200 : Math.ceil(maxY1/5+50)*5
      this.onlyY =  maxY == 0 ? 50 : Math.ceil(maxY/5+50)
      this.onlyY1 =  maxY1 == 0 ? 50 : Math.ceil(maxY1/5+50)
      this.chargeData(this.dateList, result.counts, this.types)
    },
    //填充返回的空白数据，------第二步
    chargeData(date, data, type){
      var tag
      let ele=[], eleAmount =[],average =[], total =[] ,service = [], timeDate =[], guData =[], fengData = [], pingData = [] ,jianData = []
      let singelCharge = []//单枪电量
      date.forEach(item => {
         tag = 0
        data.forEach(element => {
          if(type == 5){
            var ac =element.month <10 ? '0'+element.month : element.month
          }else{
            var dates=element.date.split("-"); //字符分割
            var ac = dates[1]+''+dates[2]
            

          }
          if(ac == item){
            tag = element
          }
        });
        if(tag == 0){
          ele.push(0)
          eleAmount.push(0)
          average.push(0)
          total.push(0)
          service.push(0)
          timeDate.push(0)
          guData.push(0)
          fengData.push(0)
          jianData.push(0)
          pingData.push(0)
          singelCharge.push(0)
        }else{
          ele.push(tag.electricity)
          eleAmount.push(tag.powerPrice)
          average.push(tag.chargeNum)
          total.push(tag.amount)
          service.push(tag.receivedServicePrice)
          timeDate.push(tag.chargeTime)
          guData.push(tag.electricityGu)
          fengData.push(tag.electricityFen)
          jianData.push(tag.electricityJian)
          pingData.push(tag.electricityPing)
          singelCharge.push(tag.singelCharge)
        }
      });
      this.ele = ele
      this.eleAmount = eleAmount
      this.average = average
      this.totalAmount = total
      this.service = service
      this.timeDate = timeDate
      this.guData = guData
      this.fengData = fengData
      this.jianData = jianData
      this.pingData = pingData
      this.singelCharge = singelCharge
      this.amoutChart()
    },
    //充电量统计图表，渲染图4，图5；-----第三步
    amoutChart(){
      // 基于准备好的dom，初始化echarts实例
      var bar_dv = this.$refs.mixChart;
      let myChart = this.$echarts.init(bar_dv, this.colorType)
      let showLeng = this.ismOrpc ? true: false
      // 绘制图表
      myChart.setOption({
        title: {text: this.chartName5,left: 'center' ,top: 13},
        color:['#f73939', '#fac858', '#2ae816', '#bc64d5', '#ea7ccc', '#9a60b4'],
        legend: {
            data: ['充电量', '充电总收入', '充电电费', '充电服务费', '充电时长(小时)'],
            left: 10,
            show:showLeng
        },
        tooltip: {
          trigger: 'axis',
          
          axisPointer: {
              type: 'cross',
              crossStyle: {
                  color: '#999'
              }
          }
      },
      toolbox: {
          feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line','bar']},
              restore: {show: true},
              saveAsImage: {show: true}
          }
      },
      xAxis: [
          {
              type: 'category',
              data: this.dateList,
              axisPointer: {
                  type: 'shadow'
              }
          }
      ],
      yAxis: [
        {
            type: 'value',
            name: '充电量(kwh)',
            min: 0,
            max: this.maxY,
            interval: this.onlyY,
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '充电金额(元)',
            min: 0,
            max: this.maxY1,
            interval: this.onlyY1,
            axisLabel: {
                formatter: '{value}'
            }
        },
     
      ],
      series: [
          {
              name: '充电量',
              type: 'bar',
              yAxisIndex: 0,
              smooth: true,
              data: this.ele,
              itemStyle: {
              normal: {
                  color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(0,244,255,1)' // 0% 处的颜色
                  }, {
                      offset: 1,
                      color: 'rgba(0,77,167,1)' // 100% 处的颜色
                  }], false),
                  shadowColor: 'rgba(0,160,221,1)',
                  // shadowBlur: 4,
              }
          },
          },
          
          {
              name: '充电总收入',
              type: 'line',
              yAxisIndex: 1,
              data: this.totalAmount,
             
              
          },
          {
              name: '充电电费',
              type: 'line',
              yAxisIndex: 1,
              data: this.eleAmount,
             
          },
          {
              name: '充电服务费',
              type: 'line',
              yAxisIndex: 1,
              data: this.service
          },
          {
              name: '充电时长(小时)',
              type: 'line',
              yAxisIndex: 1,
              itemStyle:{
                normal:{
                lineStyle:{
                width:2,
                type:'solid' //'dotted'虚线 'solid'实线
                }
              }
            },
              data: this.timeDate
          },
      ]
        });
      // 绘制图表
      //计算单枪电量
      var data = this.singelCharge
      const imgRise = ''
      const imgFall = ''

      const yearStatus = [] // 状态
      
      data.forEach((e, i) => {
        // console.log('s',e)
        var richData = {
          value: {
                        fontSize: 12,
                        // lineHeight: 30,
                        color: 'gray',
                        marginTop: -50
                    },
        }
        var s ='0%'
        if(i !=0){
          var old = data[i-1]
          var din = old==0? 0:parseFloat((((e - old) / old) * 100).toFixed(2))
          var s =  din+ '%' // 上升下降百分比
          // console.log('din',s)
          if(din!=0){
            richData ={
                    value: {
                        fontSize: 12,
                        // lineHeight: 30,
                        color: s.indexOf('-') ==-1 ? '#1afa29' : '#d81e06',
                        marginTop: -50
                    },
                    icon: {
                        align: 'center',
                        backgroundColor: {
                          image: s.indexOf('-')==-1 ? imgRise : imgFall
                        }
                    }
                  }
          }
        }
        
        const m = e // 行政区最大值 使百分比图标在当前行政区顶部
        // console.log('m',m)
        yearStatus.push({
            name: e.district,
            value: m,
            percent: s,
            label: {
              normal: {
                  show: true,
                  offset: [0, -180],
                  color: 'rgba(25, 100, 150, 1)',
                  textStyle: {
                    fontSize: '20'
                  },
                  formatter: function (params) {
                    return [
                        `{value|${s}}`, `{icon|}`
                    ].join('\n')
                  },
                  rich: richData
              }
            }
        })
      })
      var bar_dv1 = this.$refs.waveHistory;
      let myChart1 = this.$echarts.init(bar_dv1, this.colorType)
      let myChartSum = {
        title: {text: this.chartName6,left: 'center' ,top:13},
        color:['#8cdf6c', '#4c98fb','#f56679','#9d50e0','#01f1e4','#01f1e4'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        toolbox: {
          feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line','bar']},
              restore: {show: true},
              saveAsImage: {show: true}
          }
      },
        legend: {
            data: [ '谷段电量','平段电量','峰段电量','尖段电量','单枪充电量',],
            left: 10,
            show:showLeng
        },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        xAxis: [
            {
                type: 'category',
                data: this.dateList
            }
        ],
        yAxis: [
        {
            type: 'value',
            name: '充电量(度)',
            min: 0,
            max: this.maxY,
            interval: this.onlyY,
            axisLabel: {
                formatter: '{value}'
            }
        },
        
        // {
        //     type: 'value',
        //     name: '单枪电量(度)',
        //     min: 0,
        //     max: 800,
        //     interval: 200,
        //     axisLabel: {
        //         formatter: '{value}'
        //     }
        // },
     
      ],
        series: [
            {
                name: '谷段电量',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                data: this.guData
            },
                        {
                name: '平段电量',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                data: this.pingData
            },
             {
                name: '峰段电量',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                data: this.fengData
            },
            {
                name: '尖段电量',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                data: this.jianData
            },
            this.siteId? {
              name: '单枪充电量',
              type: 'bar',
              label: {
                show: true,
                position: "top",
                color: "#00A8FF",
             },
              yAxisIndex: 0,
              smooth: true,
              data: this.singelCharge,
              axisLabel: {
              show: true,
              textStyle: {
                  color: '#C5DFFB',
              }
        },
          }: '',
            {
              name: '单枪充电量',
              data: yearStatus,
              type: 'scatter',
              symbol: 'circle',
              symbolSize: 0.01,
              yAxisIndex: 0,
              itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0)'
                  }
              }
            },
            
          

        ]
      };
      myChart1.setOption(myChartSum)
    },
    
    //切换P4,P5充电数据图表类型：最近30天、最近一个月、最近一年
    checkType(type=2){
     this.setDateType(type)
      this.getAmout()
    },
    setDateType(type){
       //1 日 2、30天 3、上月 4、本月 5近12个月
       this.types = type
      var rangName =''
      if(type == 1){
        // this.noorMonth()
        rangName = '今日-'
      }else if(type == 5){
        //12个月
        this.groups = ["month"]
        rangName = '近12个月-'
        this.allMonth()
      }else {
        if(type==2){
          rangName = '近30天-'
        }else if(type ==3){
          rangName = '上月-'
        }else{
          rangName ='本月-'
        }
        this.groups = ["date"]
        
        this.noorMonth(type)
      }
      this.rangName =rangName
    },
    //获取最近30天，减去时间差
    //给日期加0
    addDate0(time) {
      if (time.toString().length == 1) {
        time = '0' + time.toString();
      }
      return time;
    },
    noorMonth(type) {
      let days = []
      var cDate, total
      let year = new Date().getFullYear()	//获取年份
      let month = new Date().getMonth() //获取月份js月份从0开始，需要+1
      if(type ==2){
        cDate = new Date()
        total = 24 * 29
      }else if(type ==3){
        //上个月
        cDate = new Date(year, month , 0)
        let tian = new Date(year, month , 0).getDate()
        total = 24 * (tian-1)
      }else if(type == 4){
        //本月
         cDate = new Date()
         let tian = new Date().getDate()
         total = 24 * (tian-1)
      }
      for(let i=0; i<=total;i+=24){		
        let dateItem=new Date(cDate.getTime() - i * 60 * 60 * 1000)	//使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
        let y = dateItem.getFullYear()	//获取年份
        let m = dateItem.getMonth() + 1	//获取月份js月份从0开始，需要+1
        let d= dateItem.getDate()	//获取日期
        m = this.addDate0(m)	//给为单数的月份补零
        d = this.addDate0(d)	//给为单数的日期补零
        let valueItem= m  +''+ d	//组合
        if(i == 0){
          this.end = y + '-' + m + '-' + d
        }
        if(i == total){
          this.begin = y + '-' + m + '-' + d
        }
        days.push(valueItem);	//添加至数组
      }
      days.reverse()
      // console.log('最近30天日期：',days, this.begin, this.end)
      this.dateList = days
      return days	
    },
    //最近12个月
    allMonth(){
      var dataArr = [];
      var data = new Date();
      var year = data.getFullYear();
      var month = data.getMonth();
      var day = new Date(year, month, 0).getDate();
      data.setMonth(data.getMonth()+1, 1)//获取到当前月份,设置月份
      for (var i = 0; i < 12; i++) {
          data.setMonth(data.getMonth() - 1);//每次循环一次 月份值减1
          var m = data.getMonth() + 1;
          m = m < 10 ? "0" + m : ''+m;
          if(i == 0){
            this.end = data.getFullYear() + "-" + (m)+ '-'+day
          }
          if(i == 11){
            this.begin = data.getFullYear() + "-" + (m)+'-01'
          }
          dataArr.push(m)
      }
      this.dateList = dataArr.reverse()
      // console.log('最近12个月',dataArr, this.begin, this.end)
    },
    //P4P5---------------------------------end
    

    //图1使用排序
    compare(property,desc) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                if(desc==true){
                    // 升序排列
                    return value1 - value2;
                }else{
                    // 降序排列
                    return value2 - value1;
                }
            }
      },
    //运营商电量/今日充电量统计 chart1（电量按站点分类）和chart3（谷峰平）图表使用
    async chargeChartFn(){
       let begin = this.time, end = this.time,  siteId = this.siteId, api = this.api
       let groups = ["date", "api"]
      //  let groupType = 
       if(!this.gourpType){
         //根据站点分类
          groups = ["date", "site"]
          // siteId = ''
          // this.siteId = ''
       }else{
         //根据运营商分类
        //  api = ''
        //  this.api = ''
       }
       var time = this.time? this.time+'-' : ''
       this.chartName1 = this.siteName+this.thirdName+time+'充电量'
       this.chartName2 = this.siteName+this.thirdName+time+'谷峰平尖段电量'
       window.localStorage.setItem('gourpType',this.gourpType)
        var  { counts } = await request({
          url: '/order/count/statistics/day',
          method:'POST',
          data:{ groups, begin, end, siteId , api, typeList: this.siteType}
        })
        counts.sort(compare('hid',true))
      // if(!this.gourpType){
      //   counts = this.exSiteData
      // }
      
    //  var counts =  [{"amount":1064.74,"chargeNum":42,"chargeSuccess":50,"chargeTime":174110,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":1612.840,"electricityFen":40.520,"electricityGu":555.720,"electricityJian":627.860,"electricityPing":388.740,"hid":510107,"powerPrice":665.12,"receivedPowerPrice":665.12,"receivedServicePrice":399.62,"servicePrice":714.44,"siteId":7,"siteName":"中装天如长虹科技大厦地下室充电站","surcharge":4.65},{"amount":2693.06,"chargeNum":142,"chargeSuccess":154,"chargeTime":478430,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4307.817,"electricityFen":19.225,"electricityGu":1783.420,"electricityJian":1955.782,"electricityPing":549.390,"hid":510106,"powerPrice":1656.64,"receivedPowerPrice":1656.64,"receivedServicePrice":1036.42,"servicePrice":1796.64,"siteId":8,"siteName":"中装天如银海中心一期充电站","surcharge":26.55},{"amount":2474.82,"chargeNum":137,"chargeSuccess":141,"chargeTime":418806,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":3981.181,"electricityFen":109.771,"electricityGu":1314.858,"electricityJian":1925.924,"electricityPing":630.628,"hid":510107,"powerPrice":1519.38,"receivedPowerPrice":1519.38,"receivedServicePrice":955.44,"servicePrice":1788.10,"siteId":10,"siteName":"中装天如长虹科技大厦地面充电站","surcharge":48.60},{"amount":1807.44,"chargeNum":99,"chargeSuccess":109,"chargeTime":341168,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2942.570,"electricityFen":29.170,"electricityGu":1261.770,"electricityJian":1376.750,"electricityPing":274.880,"hid":510106,"powerPrice":1101.22,"receivedPowerPrice":1101.22,"receivedServicePrice":706.22,"servicePrice":1263.73,"siteId":11,"siteName":"中装天如鹭岛艺术城一期充电站","surcharge":3.60},{"amount":3567.71,"chargeNum":197,"chargeSuccess":203,"chargeTime":581996,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":5477.171,"electricityFen":164.504,"electricityGu":2187.769,"electricityJian":2301.466,"electricityPing":823.432,"hid":510105,"powerPrice":2252.38,"receivedPowerPrice":2252.38,"receivedServicePrice":1315.33,"servicePrice":2277.63,"siteId":13,"siteName":"中装天如富力广场一期充电站","surcharge":14.55},{"amount":2280.52,"chargeNum":114,"chargeSuccess":132,"chargeTime":419616,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":3742.758,"electricityFen":79.675,"electricityGu":1535.048,"electricityJian":1629.912,"electricityPing":498.123,"hid":510107,"powerPrice":1376.25,"receivedPowerPrice":1376.25,"receivedServicePrice":904.27,"servicePrice":1668.57,"siteId":15,"siteName":"中装天如万达广场地下室充电站","surcharge":12.30},{"amount":2821.99,"chargeNum":146,"chargeSuccess":168,"chargeTime":537960,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4947.133,"electricityFen":59.598,"electricityGu":2406.689,"electricityJian":2208.871,"electricityPing":271.975,"hid":510105,"powerPrice":1634.06,"receivedPowerPrice":1634.06,"receivedServicePrice":1187.93,"servicePrice":2091.42,"siteId":16,"siteName":"中装天如鹏瑞利青羊广场一期充电站","surcharge":50.55},{"amount":15.79,"chargeNum":2,"chargeSuccess":1,"chargeTime":8655,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":15.040,"electricityFen":0.000,"electricityGu":0.000,"electricityJian":0.000,"electricityPing":15.040,"hid":510105,"powerPrice":8.27,"receivedPowerPrice":8.27,"receivedServicePrice":7.52,"servicePrice":7.52,"siteId":17,"siteName":"中装天如航天佳苑充电站","surcharge":0.00},{"amount":38.44,"chargeNum":0,"chargeSuccess":1,"chargeTime":17070,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":33.430,"electricityFen":0.000,"electricityGu":0.000,"electricityJian":0.000,"electricityPing":33.430,"hid":510107,"powerPrice":26.74,"receivedPowerPrice":26.74,"receivedServicePrice":11.70,"servicePrice":11.70,"siteId":18,"siteName":"中装天如珑熙珺充电站","surcharge":0.00},{"amount":2536.07,"chargeNum":124,"chargeSuccess":140,"chargeTime":441229,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4103.248,"electricityFen":31.630,"electricityGu":1778.866,"electricityJian":1860.446,"electricityPing":432.306,"hid":510105,"powerPrice":1548.69,"receivedPowerPrice":1548.69,"receivedServicePrice":987.38,"servicePrice":1743.91,"siteId":19,"siteName":"中装天如饰海金沙充电站","surcharge":12.00},{"amount":2968.32,"chargeNum":157,"chargeSuccess":166,"chargeTime":520820,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4632.104,"electricityFen":72.407,"electricityGu":1976.863,"electricityJian":1889.235,"electricityPing":693.599,"hid":510124,"powerPrice":1855.82,"receivedPowerPrice":1855.82,"receivedServicePrice":1112.50,"servicePrice":2023.93,"siteId":20,"siteName":"中装天如百伦广场充电站","surcharge":2.55},{"amount":2888.46,"chargeNum":167,"chargeSuccess":177,"chargeTime":529164,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4809.654,"electricityFen":17.747,"electricityGu":2137.259,"electricityJian":2355.894,"electricityPing":298.754,"hid":510107,"powerPrice":1718.47,"receivedPowerPrice":1718.47,"receivedServicePrice":1169.99,"servicePrice":2057.47,"siteId":21,"siteName":"中装天如和雅嘉御充电站","surcharge":34.65},{"amount":2596.15,"chargeNum":140,"chargeSuccess":149,"chargeTime":441667,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4178.236,"electricityFen":39.852,"electricityGu":1734.987,"electricityJian":1941.519,"electricityPing":461.878,"hid":510106,"powerPrice":1593.29,"receivedPowerPrice":1593.29,"receivedServicePrice":1002.86,"servicePrice":1724.78,"siteId":22,"siteName":"中装天如鹭岛艺术城二期充电站","surcharge":6.75},{"amount":4284.38,"chargeNum":284,"chargeSuccess":269,"chargeTime":707288,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":6473.673,"electricityFen":265.763,"electricityGu":2537.008,"electricityJian":2687.355,"electricityPing":983.547,"hid":510108,"powerPrice":2711.02,"receivedPowerPrice":2711.02,"receivedServicePrice":1573.36,"servicePrice":2783.58,"siteId":23,"siteName":"中装天如鹏瑞利广场一期充电站","surcharge":19.65},{"amount":1255.13,"chargeNum":74,"chargeSuccess":81,"chargeTime":219950,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":1921.919,"electricityFen":65.984,"electricityGu":817.963,"electricityJian":752.505,"electricityPing":285.467,"hid":510108,"powerPrice":793.89,"receivedPowerPrice":793.89,"receivedServicePrice":461.24,"servicePrice":807.45,"siteId":24,"siteName":"中装天如鹏瑞利广场二期充电站","surcharge":3.60},{"amount":70.71,"chargeNum":1,"chargeSuccess":6,"chargeTime":91292,"comboPowerPrice":0.00,"comboServicePrice":39.91,"date":"24-03-04","electricity":168.290,"electricityFen":0.000,"electricityGu":168.290,"electricityJian":0.000,"electricityPing":0.000,"hid":510124,"powerPrice":40.38,"receivedPowerPrice":40.38,"receivedServicePrice":70.24,"servicePrice":70.24,"siteId":25,"siteName":"中装天如龙城国际(1.2.3期)交流充电站","surcharge":0.00},{"amount":2859.11,"chargeNum":162,"chargeSuccess":171,"chargeTime":503882,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4593.393,"electricityFen":26.356,"electricityGu":1995.552,"electricityJian":2014.854,"electricityPing":556.631,"hid":510106,"powerPrice":1756.64,"receivedPowerPrice":1756.64,"receivedServicePrice":1102.47,"servicePrice":1972.32,"siteId":28,"siteName":"中装天如银海中心二期充电站","surcharge":3.00},{"amount":62.59,"chargeNum":3,"chargeSuccess":4,"chargeTime":42727,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":67.550,"electricityFen":0.000,"electricityGu":48.690,"electricityJian":0.000,"electricityPing":18.860,"hid":510124,"powerPrice":22.07,"receivedPowerPrice":22.07,"receivedServicePrice":40.52,"servicePrice":40.52,"siteId":30,"siteName":"中装天如龙城国际共享交流充电站","surcharge":0.00},{"amount":2917.39,"chargeNum":143,"chargeSuccess":165,"chargeTime":482624,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4619.799,"electricityFen":81.515,"electricityGu":2381.629,"electricityJian":1614.670,"electricityPing":541.985,"hid":510104,"powerPrice":1801.89,"receivedPowerPrice":1801.89,"receivedServicePrice":1115.50,"servicePrice":2054.52,"siteId":31,"siteName":"中装天如五八西部中心充电站","surcharge":8.70},{"amount":2628.46,"chargeNum":147,"chargeSuccess":169,"chargeTime":472895,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4425.717,"electricityFen":38.638,"electricityGu":2112.346,"electricityJian":2073.460,"electricityPing":201.273,"hid":510108,"powerPrice":1567.78,"receivedPowerPrice":1567.78,"receivedServicePrice":1060.68,"servicePrice":1861.80,"siteId":32,"siteName":"中装天如朗基城充电站","surcharge":6.45},{"amount":1504.65,"chargeNum":85,"chargeSuccess":92,"chargeTime":273513,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2494.466,"electricityFen":46.377,"electricityGu":983.602,"electricityJian":1158.432,"electricityPing":306.055,"hid":510107,"powerPrice":904.89,"receivedPowerPrice":904.89,"receivedServicePrice":599.76,"servicePrice":1095.06,"siteId":34,"siteName":"中装天如万达广场地面充电站","surcharge":1.05},{"amount":1358.81,"chargeNum":70,"chargeSuccess":77,"chargeTime":266152,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2294.921,"electricityFen":26.183,"electricityGu":1031.500,"electricityJian":984.269,"electricityPing":252.969,"hid":510105,"powerPrice":807.12,"receivedPowerPrice":807.12,"receivedServicePrice":551.69,"servicePrice":981.09,"siteId":35,"siteName":"中装天如鹏瑞利青羊广场二期充电站","surcharge":6.00},{"amount":1626.35,"chargeNum":77,"chargeSuccess":92,"chargeTime":333514,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2804.592,"electricityFen":0.725,"electricityGu":1613.315,"electricityJian":1116.729,"electricityPing":73.823,"hid":510124,"powerPrice":955.04,"receivedPowerPrice":955.04,"receivedServicePrice":671.31,"servicePrice":1205.76,"siteId":37,"siteName":"中装天如龙城国际充电站","surcharge":2.25},{"amount":3656.65,"chargeNum":202,"chargeSuccess":230,"chargeTime":700544,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":6464.348,"electricityFen":10.345,"electricityGu":3098.963,"electricityJian":2987.120,"electricityPing":367.920,"hid":510115,"powerPrice":2092.97,"receivedPowerPrice":2092.97,"receivedServicePrice":1563.68,"servicePrice":2718.46,"siteId":38,"siteName":"中装天如海天腾逸充电站","surcharge":46.35},{"amount":3058.58,"chargeNum":177,"chargeSuccess":183,"chargeTime":532045,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4850.103,"electricityFen":120.953,"electricityGu":1895.170,"electricityJian":2052.495,"electricityPing":781.485,"hid":510102,"powerPrice":1900.90,"receivedPowerPrice":1900.90,"receivedServicePrice":1157.68,"servicePrice":2048.10,"siteId":39,"siteName":"中装天如公共服务停车场","surcharge":57.75},{"amount":1776.93,"chargeNum":113,"chargeSuccess":123,"chargeTime":341705,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":3073.021,"electricityFen":43.166,"electricityGu":1425.929,"electricityJian":1463.533,"electricityPing":140.393,"hid":510108,"powerPrice":1039.41,"receivedPowerPrice":1039.41,"receivedServicePrice":737.52,"servicePrice":1312.12,"siteId":40,"siteName":"中装天如鹏瑞利广场三期充电站","surcharge":1.20},{"amount":1810.10,"chargeNum":87,"chargeSuccess":100,"chargeTime":304792,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2876.198,"electricityFen":46.976,"electricityGu":1126.976,"electricityJian":1215.092,"electricityPing":487.154,"hid":510102,"powerPrice":1119.01,"receivedPowerPrice":1119.01,"receivedServicePrice":691.09,"servicePrice":1274.12,"siteId":41,"siteName":"中装天如通威国际中心充电站","surcharge":68.70},{"amount":1569.52,"chargeNum":72,"chargeSuccess":85,"chargeTime":288724,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":2709.699,"electricityFen":63.093,"electricityGu":1465.694,"electricityJian":1087.387,"electricityPing":93.525,"hid":510106,"powerPrice":923.03,"receivedPowerPrice":923.03,"receivedServicePrice":646.49,"servicePrice":1194.22,"siteId":42,"siteName":"中装天如金域西岭充电站","surcharge":1.35},{"amount":2698.78,"chargeNum":135,"chargeSuccess":158,"chargeTime":534492,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4974.160,"electricityFen":15.088,"electricityGu":2457.736,"electricityJian":2254.282,"electricityPing":247.054,"hid":510106,"powerPrice":1504.97,"receivedPowerPrice":1504.97,"receivedServicePrice":1193.81,"servicePrice":2296.03,"siteId":43,"siteName":"中装天如时代天境停车场充电站","surcharge":4.05},{"amount":1155.87,"chargeNum":51,"chargeSuccess":64,"chargeTime":226546,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":1914.615,"electricityFen":22.574,"electricityGu":1123.332,"electricityJian":629.868,"electricityPing":138.841,"hid":510112,"powerPrice":699.88,"receivedPowerPrice":699.88,"receivedServicePrice":455.99,"servicePrice":901.57,"siteId":45,"siteName":"中装天如滨河综合市场充电站","surcharge":0.00},{"amount":2923.49,"chargeNum":120,"chargeSuccess":153,"chargeTime":542152,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4781.494,"electricityFen":121.795,"electricityGu":2508.553,"electricityJian":1856.784,"electricityPing":294.362,"hid":510107,"powerPrice":1776.98,"receivedPowerPrice":1776.98,"receivedServicePrice":1146.51,"servicePrice":2039.12,"siteId":46,"siteName":"中装天如桂龙公园充电站","surcharge":0.00},{"amount":2673.79,"chargeNum":130,"chargeSuccess":157,"chargeTime":463321,"comboPowerPrice":0.00,"comboServicePrice":0.00,"date":"24-03-04","electricity":4372.322,"electricityFen":27.836,"electricityGu":1901.654,"electricityJian":2019.039,"electricityPing":423.793,"hid":510108,"powerPrice":1620.21,"receivedPowerPrice":1620.21,"receivedServicePrice":1053.58,"servicePrice":1834.28,"siteId":47,"siteName":"中装天如成华公园充电站","surcharge":0.00}]
    
      // console.log('今日充电量统计',  counts)
      // let color = ['#f73939', '#73c0de', '#91cc75', '#fac858',  '#ea7ccc','#9a60b4']
      let color = ["#1890FF","#9ce545","#FAC858","#f73939","#5dc7f0",'#18d2be',"#FC8452","#5c60ff","#ea7ccc","#9a60b4","#aa5500","#ff007f","#3CA272",'#a036f2','#d3930a','#f66108']
      let apiTotal = 0 
      let chartData = []
      let orderData = []
      let waveData = []
      var totalAmout = 0, totalPower = 0, totalService = 0
      var dayAmount = 0
      let top =0, center = 0, bottom = 0, jian = 0
      var names= ''
      let siteMount = this.siteMount
      //  console.log('枪数量', siteMount)
      counts.map((item, index) => {
        var singelData = 0
        names = item.apiName ? item.apiName : item.siteName
        dayAmount = item.receivedPowerPrice + item.receivedServicePrice
        totalAmout+=dayAmount
        dayAmount = dayAmount.toFixed(2)

        //计算单枪平均电量
          // console.log('siteId单枪电量',this.api)
          siteMount.map(value => {
          if(value.siteId == item.siteId){
            singelData = (item.electricity/value.gun).toFixed(2)
          }
        })
        chartData[index]= {value: item.electricity, name: names, color: color[index], amount: dayAmount, singelData}
        apiTotal+=item.electricity
        totalPower+=item.receivedPowerPrice
        totalService+=item.receivedServicePrice
        top+= item.electricityFen
        jian+= item.electricityJian
        center+= item.electricityPing
        bottom+= item.electricityGu
       
        orderData[index]= {value: dayAmount, name: names, color: color[index]}
      })
      this.apiTotal = apiTotal.toFixed(2)
      // console.log('chartData', chartData)
      chartData.sort(this.compare('singelData',false))
      this.chartData = chartData
      this.orderData = orderData
      this.totalAmout = totalAmout.toFixed(2)
      this.totalPower = totalPower.toFixed(2)
      this.totalService = totalService.toFixed(2)
      bottom = bottom.toFixed(3)
      center = center.toFixed(3)
      top = top.toFixed(3)
      jian = jian.toFixed(3)
      let color2 = ["#58d2b4","#fac858", "#ee752c", "#a45ed9"]
      waveData = [
        {value: bottom, name: "谷段电量", color: "#58d2b4"},
        {value: center, name: "平段电量", color: "#fac858"},
        {value: top, name: "峰段电量", color: "#ee752c"},
        {value: jian, name: "尖段电量", color: "#a45ed9"}
      ]
      this.waveData = waveData
      // console.log('今日充电量统计chartData',chartData)

      this.eletri = counts
      var bar_dv = this.$refs.chargeChart;
      let myChart = this.$echarts.init(bar_dv, this.colorType)
      // var bar_dv1 = this.$refs.cashChart;
      // let myChart1 = this.$echarts.init(bar_dv1, this.colorType)
      var bar_dv2 = this.$refs.waveChart;
      let myChart2 = this.$echarts.init(bar_dv2, this.colorType)
      myChart.setOption(
         {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            color:color,
            legend: {
                show: false,
                top: '0',
                left: 'center'
            },
            series: [
                {
                    name: '充电量',
                    type: 'pie',
                    radius: ['75%', '57%'],
                    avoidLabelOverlap: false,
                    selectedMode: 'single',
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '12',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: chartData
                }
            ] 
         }
        );

              
      myChart2.setOption(
         {
            tooltip: {
                trigger: 'item'
            },
            color:color2,
            legend: {
              show: false,
                top: '0',
                left: 'center'
            },
            series: [
                {
                    name: '谷峰平尖电量',
                    type: 'pie',
                    radius: ['75%', '57%'],
                    avoidLabelOverlap: false,
                    selectedMode: 'single',
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '12',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: waveData
                }
            ] 
         }
        );
    },
    

    setPercent(total, value){
      return (value/total*100).toFixed(2)
    },
    //图2----------------------------------------
    //枪状态统计合计，图2上半部分
    async gunChartFn(){
      let groups = this.todayGroups, api = this.api
      var  { list } = await request({
        url: '/iot/count/states',
        method:'POST',
        data:{api, groups,typeList: this.siteType}
      })
      var tag, gunState = [], gunList = [], total = 0
      for(let i=1;i<=9;i++){
        tag = {state: i, total: 0, percent: 0}
        list.forEach(item => {
          // if(item.state == i ){
          //   tag = item
          // }
          if(i!=9){
            if(i == item.state){
              tag = item
            total+= item.total
          }
          }else{
            if(item.state==0){
              tag = item
              total+= item.total
            }
          }
          
        });
        tag.percent = total==0? 0 : (tag.total* 100 / total).toFixed(2) 
        tag.color = tag.state == 1? '#91cc75': tag.state == 2? '#73c0de': tag.state == 3? '#ea7ccc': tag.state == 4? '#f73939': tag.state == 5? '#fac858': tag.state == 6? '#ab6060': tag.state == 7? '#9a60b4': tag.state == 8? '#eb7a1e':'#bfbfbf'
        tag.name = tag.state == 1? '空闲': tag.state == 2? '准备充电中': tag.state == 3? '充电中': tag.state == 4? '占用未充电': tag.state == 5? '充电完成': tag.state == 6? '故障': tag.state == 7? '离网': tag.state == 8? '占位': '离线'
        gunState.push(tag.total)
        gunList.push(tag)
        
      }
      this.gunTotal = total
      this.gunState = gunState
      this.gunList = gunList
      
      let use  = (gunState[1]+gunState[2]+gunState[3]+gunState[4])
      let useTotal = total - gunState[8]- gunState[6]- gunState[5]
      console.log('枪列表',gunState, useTotal)
      this.usePercent = use ==0? 0: ((use) / useTotal*100).toFixed(2)
      this.useText = `${use}/${useTotal}`
      
      
      //图标表
      var bar_dv = this.$refs.gunChart;
      let myChart = this.$echarts.init(bar_dv, this.colorType)
       myChart.setOption(
         {
            tooltip: {
                trigger: 'item'
            },
            color:['#91cc75','#73c0de', '#ea7ccc', '#f73939',  '#fac858','#9a60b4', '#bfbfbf'],
            legend: {
              show: false,
                top: '0',
                left: 'center',
                bottom:'30'
            },
            series: [
                {
                    name: '充电枪状态',
                    type: 'pie',
                    radius: ['75%', '57%'],
                    avoidLabelOverlap: false,
                    selectedMode: 'single',
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '12',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: this.gunState[1], name: '空闲'},
                        {value: this.gunState[2], name: '准备充电中'},
                        {value: this.gunState[3], name: '充电中'},
                        {value: this.gunState[4], name: '占用未充电'},
                        {value: this.gunState[5], name: '充电完成'},
                        {value: this.gunState[6], name: '故障'},
                        {value: this.gunState[7], name: '离网'},
                        {value: this.gunState[0], name: '离线'},


                    ]
                }
            ] 
         }
        );
    },
     //枪状态统计分站点、图2表格下半部分，分区域显示
    async gunChartSite(){
      let groups = this.todayGroups, api = this.api
      var  { list } = await request({
        url: '/iot/count/states/group',
        method:'POST',
        data:{api, groups, typeList: this.siteType}
      })
      // var list = [{"hid":510108,"list":[{"state":7,"total":1}],"siteId":1,"siteName":"成华测试站点"},{"hid":510107,"list":[{"siteId":7,"state":1,"total":12}],"siteId":7,"siteName":"中装天如长虹科技大厦地下室充电站"},{"hid":510106,"list":[{"siteId":8,"state":1,"total":16},{"siteId":8,"state":5,"total":1},{"siteId":8,"state":3,"total":3}],"siteId":8,"siteName":"中装天如银海中心一期充电站"},{"hid":510107,"list":[{"siteId":10,"state":1,"total":12},{"siteId":10,"state":3,"total":7}],"siteId":10,"siteName":"中装天如长虹科技大厦地面充电站"},{"hid":510106,"list":[{"siteId":11,"state":1,"total":17},{"siteId":11,"state":3,"total":3}],"siteId":11,"siteName":"中装天如鹭岛艺术城一期充电站"},{"hid":510108,"list":[{"state":7,"total":4}],"siteId":12,"siteName":"成华科技大厦交流桩"},{"hid":510105,"list":[{"siteId":13,"state":1,"total":12},{"siteId":13,"state":3,"total":7},{"siteId":13,"state":5,"total":3},{"siteId":13,"state":6,"total":2}],"siteId":13,"siteName":"中装天如富力广场一期充电站"},{"hid":510107,"list":[{"siteId":15,"state":1,"total":23},{"siteId":15,"state":3,"total":1}],"siteId":15,"siteName":"中装天如万达广场地下室充电站"},{"hid":510105,"list":[{"siteId":16,"state":1,"total":25},{"siteId":16,"state":3,"total":4},{"siteId":16,"state":5,"total":1}],"siteId":16,"siteName":"中装天如鹏瑞利青羊广场一期充电站"},{"hid":510105,"list":[{"siteId":17,"state":1,"total":2},{"siteId":17,"state":3,"total":1},{"state":4,"total":2}],"siteId":17,"siteName":"中装天如航天佳苑充电站"},{"hid":510107,"list":[{"siteId":18,"state":1,"total":2},{"siteId":18,"state":0,"total":1}],"siteId":18,"siteName":"中装天如珑熙珺充电站"},{"hid":510105,"list":[{"siteId":19,"state":1,"total":19},{"siteId":19,"state":3,"total":2}],"siteId":19,"siteName":"中装天如饰海金沙充电站"},{"hid":510124,"list":[{"siteId":20,"state":1,"total":15},{"siteId":20,"state":3,"total":5}],"siteId":20,"siteName":"中装天如百伦广场充电站"},{"hid":510107,"list":[{"siteId":21,"state":1,"total":26},{"siteId":21,"state":3,"total":4}],"siteId":21,"siteName":"中装天如和雅嘉御充电站"},{"hid":510106,"list":[{"siteId":22,"state":1,"total":13},{"siteId":22,"state":3,"total":4},{"state":4,"total":1}],"siteId":22,"siteName":"中装天如鹭岛艺术城二期充电站"},{"hid":510108,"list":[{"siteId":23,"state":3,"total":23},{"siteId":23,"state":1,"total":14},{"siteId":23,"state":5,"total":1},{"state":4,"total":2}],"siteId":23,"siteName":"中装天如鹏瑞利广场一期充电站"},{"hid":510108,"list":[{"siteId":24,"state":1,"total":19},{"siteId":24,"state":3,"total":2},{"siteId":24,"state":2,"total":1}],"siteId":24,"siteName":"中装天如鹏瑞利广场二期充电站"},{"hid":510124,"list":[{"siteId":25,"state":1,"total":13},{"siteId":25,"state":0,"total":2},{"state":4,"total":2}],"siteId":25,"siteName":"中装天如龙城国际(1.2.3期)交流充电站"},{"hid":510106,"list":[{"siteId":28,"state":1,"total":14},{"siteId":28,"state":3,"total":6}],"siteId":28,"siteName":"中装天如银海中心二期充电站"},{"hid":510124,"list":[{"siteId":30,"state":1,"total":8},{"state":4,"total":2}],"siteId":30,"siteName":"中装天如龙城国际共享交流充电站"},{"hid":510104,"list":[{"siteId":31,"state":1,"total":26},{"siteId":31,"state":5,"total":1},{"siteId":31,"state":2,"total":1},{"siteId":31,"state":3,"total":2}],"siteId":31,"siteName":"中装天如五八西部中心充电站"},{"hid":510108,"list":[{"siteId":32,"state":1,"total":25},{"siteId":32,"state":3,"total":2},{"state":8,"total":1}],"siteId":32,"siteName":"中装天如朗基城充电站"},{"hid":510107,"list":[{"siteId":34,"state":1,"total":13},{"siteId":34,"state":3,"total":3}],"siteId":34,"siteName":"中装天如万达广场地面充电站"},{"hid":510105,"list":[{"siteId":35,"state":1,"total":9},{"siteId":35,"state":3,"total":3}],"siteId":35,"siteName":"中装天如鹏瑞利青羊广场二期充电站"},{"hid":510124,"list":[{"siteId":37,"state":1,"total":19},{"siteId":37,"state":3,"total":1}],"siteId":37,"siteName":"中装天如龙城国际充电站"},{"hid":510115,"list":[{"siteId":38,"state":1,"total":38},{"siteId":38,"state":3,"total":2}],"siteId":38,"siteName":"中装天如海天腾逸充电站"},{"hid":510102,"list":[{"siteId":39,"state":1,"total":32},{"siteId":39,"state":3,"total":6},{"siteId":39,"state":5,"total":2}],"siteId":39,"siteName":"中装天如公共服务停车场"},{"hid":510108,"list":[{"siteId":40,"state":1,"total":21},{"siteId":40,"state":3,"total":3}],"siteId":40,"siteName":"中装天如鹏瑞利广场三期充电站"},{"hid":510102,"list":[{"siteId":41,"state":1,"total":26},{"siteId":41,"state":3,"total":3},{"state":4,"total":1}],"siteId":41,"siteName":"中装天如通威国际中心充电站"},{"hid":510106,"list":[{"siteId":42,"state":6,"total":2},{"siteId":42,"state":1,"total":21},{"siteId":42,"state":3,"total":1}],"siteId":42,"siteName":"中装天如金域西岭充电站"},{"hid":510106,"list":[{"siteId":43,"state":1,"total":28},{"siteId":43,"state":3,"total":2}],"siteId":43,"siteName":"中装天如时代天境停车场充电站"},{"hid":510105,"list":[{"siteId":44,"state":1,"total":24}],"siteId":44,"siteName":"中装天如富力广场二期充电站"},{"hid":510112,"list":[{"siteId":45,"state":1,"total":17},{"state":4,"total":1}],"siteId":45,"siteName":"中装天如滨河综合市场充电站"},{"hid":510107,"list":[{"siteId":46,"state":1,"total":61},{"siteId":46,"state":3,"total":3},{"state":4,"total":5}],"siteId":46,"siteName":"中装天如桂龙公园充电站"},{"hid":510108,"list":[{"siteId":47,"state":1,"total":30},{"siteId":47,"state":3,"total":4},{"state":4,"total":2}],"siteId":47,"siteName":"中装天如成华公园充电站"}]
      list.sort(compare('hid',true))
      // console.log('站点枪状态统计',list)
      // let state = list.list
      let urls = "/iot/site/gunList?id="
      if(!this.ismOrpc){
        urls = "/iot/site/gunListApp?id="
      }
      let siteGunState = []
      let siteMount = []
      for(let j = 0; j<list.length;j++) {
        var flagData = list[j].list
        var tag = []
        var gunNum = 0
        for(var i = 1; i<=9;i++) {
          tag.push([{total: 0}])
          // item.color = item.state == 1? '#91cc75': item.state == 2? '#73c0de': item.state == 3? '#ea7ccc': item.state == 4? '#f73939': item.state == 5? '#fac858': item.state == 6? '#ab6060': item.state == 7? '#9a60b4': item.state == 8? '#eb7a1e':'#bfbfbf'
          flagData.map((item, index) => {
            if(item.state ===i){
              // console.log('item',item)
              item.color = i == 1? '#91cc75': i == 2? '#73c0de': i == 3? '#ea7ccc': i == 4? '#f73939': i == 5? '#fac858': i == 6? '#ab6060': i == 7? '#9a60b4': i == 8? '#eb7a1e':'#bfbfbf'
              tag[i] = item
              gunNum+=item.total 
            }
              if(item.state ===i-9){
              item.color = '#bfbfbf'
              tag[i] = item
              gunNum+=item.total 
             }
          })
          // tag[i]['color']= i == 1? '#91cc75': i == 2? '#73c0de': i == 3? '#ea7ccc': i == 4? '#f73939': i == 5? '#fac858': i == 6? '#ab6060': i == 7? '#9a60b4': i == 8? '#eb7a1e':'#bfbfbf'

        }
        // flagData.map((item, index) => {
        //   item.color = item.state == 1? '#91cc75': item.state == 2? '#73c0de': item.state == 3? '#ea7ccc': item.state == 4? '#f73939': item.state == 5? '#fac858': item.state == 6? '#ab6060': item.state == 7? '#9a60b4': item.state == 8? '#eb7a1e':'#bfbfbf'
        //   tag[index] = item
        //   gunNum+=item.total
        // })
        tag.splice(0,1)
      siteGunState[j] = {state:tag, siteName: list[j].siteName,hidName: list[j].hidName,url: urls+list[j].siteId}
      siteMount[j] = {siteId:  list[j].siteId, gun: gunNum,siteName: list[j].siteName}
      }
      // 按年龄分组
      const groupedByAge = siteGunState.reduce((accumulator, current) => {
          const key = current.hidName; // 选取要分组的字段（这里为年龄）
          
          if (!accumulator[key]) {
              accumulator[key] = [];
          }
        
          accumulator[key].push(current);
        
          return accumulator;
      }, {});
      
      console.log('枪状态分组',groupedByAge);
     
      // this.gunTotal = total
      // console.log('枪列表',siteGunState)
      // console.log('枪数量', siteMount)
      // this.gunState = gunState
      this.siteMount = siteMount
      this.siteGunState = groupedByAge
      // this.chargeChartFn()
      
    },




    
    //筛选栏数据------------------------------
    //设置年月日
    setDate(type){
      let dd= new Date()
      var y = dd.getFullYear()
      var m = dd.getMonth()+1;//获取当前月份的日期 
      var d = dd.getDate(); 
      d = d >=10 ? d: '0'+d 
      this.time = y+'-'+m+'-'+d
      let myDate = new Date(this.time)
      let year = myDate.getFullYear()
      let month = (myDate.getMonth()+1)
      let today = new Date((myDate.getTime() - 3600 * 1000 * 24))
      let todayY = today.getFullYear()
      let todayM = today.getMonth() +1
      let todayD =today.getDate()
      if(month <10){
        month = '0'+month
      }
      if(todayM <10){
        todayM = '0'+todayM
      }
       if(todayD <10){
        todayD = '0'+todayD
      }
      let day = myDate.getDate()
       if(day <10){
        day = '0'+day
      }
      this.day = year+'-'+month+'-'+day
      this.today = this.day
      // this.today = todayY+'-'+todayM+'-'+todayD
    },
    //筛选切换时间
    changeCheck(){
      this.iotList.map((item)=> {
        if(item.id == this.siteId){
          this.siteName = item.name+'-'
        }
        
      })
      this.siteMount.map(item =>{
        if(item.siteId == this.siteId){
          this.singelSiteGun = item.gun
        }
      })
      this.getAmout()
      // this.orderChartFn()
      this.chargeChartFn()
      // this.cashChartFn()
    },
    //运营商筛选
    changeSearch(key) {
      this.company.map((item)=> {
        if(item.id == this.api){
          this.thirdName = item.name+'-'
        }
      })
      // this[key] = val;
      // this.pager.current = 1;
      this.chargeChartFn()
      // this.cashChartFn()
      // this.gunChartFn()
      this.getAmout()
    },
    //站点
    async getIot (){
      const  iot = await request({
        url: '/iot/site/select',
        method:'POST',
        data:{typeList: this.siteType}
      })
      // console.log('站点-----',iot)
      this.iotList = iot.list
    },
    
    //第三方公司
    async companyTh(){
      let { list } = await request({
      url: "/third/company/select",
      method: "POST",
      data: {}
      });
      let my = {id: 0, name: '公司自营'}
      this.company = [my, ...list]
      // console.log('公司',my, this.company, list)
    },
    //----------------------------------
    //互联互通站点统计/未使用
    async getThirdSite(){
      // let res = await request({
      // url: "/third/company/site/count",
      // method: "POST",
      // data: {}
      // });
      
      // res.map(item => {
      //   var allNum = 0
      //   if(item.sites.length >0){
      //     item.sites.map(val => {
      //       allNum+=val.gunNum
      //     })
      //     item.allNum = allNum
      //   }
      //   return item
      // })
      // this.thirdSites = res
      // console.log('互联互通站点统计',res)
    },
    //今日单量统计/暂未使用
    async orderChartFn(){
      let groups = this.todayGroups, api = this.api, siteId = this.siteId
      const  iot = await request({
        url: '/today/count/states',
        method:'POST',
        data:{api, groups, siteId}
      })
      // console.log('今日单量统计',iot)
      
      var bar_dv = this.$refs.orderChart;
      let myChart = this.$echarts.init(bar_dv)
      myChart.setOption(
         {
            tooltip: {
                trigger: 'item'
            },
            color:['#73c0de', '#91cc75', '#fac858', '#f73939', '#ea7ccc', '#9a60b4'],
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '订单量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    selectedMode: 'single',
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '12',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 1048, name: '已支付'},
                        {value: 735, name: '充电中'},
                        {value: 580, name: '待支付'},
                    ]
                }
            ] 
         }
        );
      
    },
    //今日营收统计/未使用
    async cashChartFn(){
      let groups = this.todayGroups, api = this.api, siteId = this.siteId
      let  { settlement } = await request({
        url: '/today/count/settlement',
        method:'POST',
        data:{api, groups, siteId}
      })
      // console.log('今日营收统计',settlement)
      if(!settlement){
        settlement = {amount: 0, total: 0}
      }
      this.settlement = settlement
      var bar_dv = this.$refs.cashChart;
      let myChart = this.$echarts.init(bar_dv)
       myChart.setOption(
         {
            tooltip: {
                trigger: 'item'
            },
            color:['#73c0de', '#91cc75', '#fac858', '#fac858', '#f73939', '#ea7ccc', '#9a60b4'],
            legend: {
                top: '5%',
                left: 'center',
                show: false
            },
            series: [
                {
                    name: '今日营收',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    selectedMode: 'single',
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '12',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: settlement.total, name: '今日营收'},
                    ]
                }
            ] 
         }
        );
    },

  },
  created(){
    let that = this
    let rout = this.$store.getters.permissions
    console.log('判断接口是否授权', rout.indexOf('order:count:statistics'), rout.indexOf('iot:count:statistics'))
    if(rout.indexOf('order:count:statistics') <0 && rout.indexOf('iot:count:statistics') <0){
      this.role = false
      return false
    }else{
      if(rout.indexOf('order:count:statistics') <0){
        this.chart1 = false
      }
      if(rout.indexOf('iot:count:statistics') <0){
        this.chart2 = false
      }
      this.colorType = window.localStorage.getItem('colorType') ? window.localStorage.getItem('colorType'): ''
      this.gourpType = window.localStorage.getItem('gourpType') ? window.localStorage.getItem('gourpType'): true
      this.setDate(1)
      this.setDateType(2)//设置选择时间类型chart4
      this.companyTh()
      this.getIot()
      if(rout.indexOf('order:count:statistics') >=0){
        
        setTimeout(() => {
          that.getAmout()
          that.chargeChartFn()
        }, 500);
      }
      if(rout.indexOf('iot:count:statistics') >= 0){
        this.gunChartFn()
        this.gunChartSite()
      }
    }
    
   
  },
  mounted() {
    // if(!this.role){
    //   return false
    // }
    // this.amoutChart()
    // this.orderChartFn()
    // this.cashChartFn()
    // this.gunChartFn()
    // this.gunChartSite()
    // this.getAmout()
    // this.getIot()
    // this.getThirdSite()
    // this.chargeChartFn()
    // setTimeout(() => {
    //   that.chargeChartFn()
    // }, 500);
    
  }
}
</script>
<style lang='scss' module>
@media  screen and (max-device-width: 500px) {
    .amoutday {
      flex-wrap: wrap;
      background: #f7f9fb;
     }
}
.taband{
  width:100%;height:40px;background: #ffffff;
  display: flex;
  align-items: center;
  font-size: 15px;
  border: 1px solid #e3e7e7;
    box-shadow: 1px 18px 16px #f5f5f5;
    margin-bottom: 4px;
    margin-top: 27px
}
.tabitem {
  background: #f5f7fa;
  color: #000;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  cursor: pointer;
}
.stateLine {
    width: 4px;
    height: 12px;
    display: block;
    background-color: red;
    border-radius: 10px;
    margin-right: 5px;
}
.tabcheck{
  color: #ffffff;
  background: #409EFF;
}
.contentchart {
  width: 100%;
  white-space: nowrap;
  overflow: auto;
  height: 220px;
}
.contentchart1 {
  // margin-top: 40px;
  position: relative;
  height: 380px;
  overflow: hidden;
}
.fixedTable {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.tb-head {

}
.flexTitle {
  display: flex;
  align-items: center;
  margin-left: 15px;
}
.sitename {
  overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}
.sitename1 {
  width: 43%;
  overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}
.amoutcharge{
  width: 100%;margin-top: 40px;
}

.contentrow{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 1px 17px;
  height: 20px;
  flex: 1;
  flex-wrap: nowrap;
  .set-wid {
    width: 40%;
  }
  .set-nowid {
    width: 10%;
  }
  p {
    width: 33%;
  }
}
.contentrow1 {
  min-width: 220px;
  justify-content: flex-start;
}
.chargelist {
  // overflow: hidden;
  min-width: 380px;
}
.chartcir{
width:80%;height:300px;
}
.prixchart{
    width: 10px;
    height: 10px;
    display: block;
    background-color: red;
    border-radius: 10px;
    margin-right: 5px;
}
.headerchart{
  display: flex;
  align-items: center;
  width: 43%;
  overflow: hidden;
  word-break: keep-all;
  text-overflow: ellipsis;
}
.win{
  color: #999999;
}
.searchbtn{
    width: 100%;display: flex;justify-content: flex-end;
  }
.home {
  background: #f7f9fb;
  // min-width: 1110px;
}
.homeDark {
   background: #100c2a;
  // min-width: 1110px;
}
.amoutschart {
    height: 54px;
    // line-height: 40px;
    margin-left: 15px;
    font-size: 30px;
    font-weight: bold;
    color: #297fd6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    .amoutschartmin{
      // color: #5f9ea0;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      // margin-left: 33px;
    span {
      height: 23px;
    }
    }
    
}
.chartboxs{
  width:25%;height:660px;background-color:white;margin: 0 10px;border-radius: 4px; padding: 10px 1%;
}
.titlechart{
    line-height: 20px;
    margin: 10px 0 8px 15px;
    font-size: 15px;
    color: #047ce7;
    font-weight: 700;
  }
  .markchart{
    height: 25px;
    line-height: 40px;
    margin-left: 15px;
    font-size: 14px;
    color: #898b8e;
  }
.affair{
  display: flex;
  flex-wrap: wrap;

  
  .number{
    
  }
  :global{
    a{
      box-sizing: border-box;
      min-width: 30%;
      width: 30%;
      // display: inline-block;
      display: flex;
      justify-content: space-between;
      margin: 10px;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      padding: 0 20px 10px 20px;

      span{
        display: inline-block;
        color: #333333;
      }
    }
  }
}
.overview{
  display: flex;
  justify-content: space-between;

  :global{
    .miniPanel{
      width: 48%;
    }
    .body{
      display: flex;
      height: 150px;
      align-items: center;

      >div{
        // width: 33%;
        text-align: center;
        flex: 1;

      }
      .title{
        font-size: 16px;
      }
      .number{
        font-size: 34px;
        color: #F04844;
      }
    }
  }
}
.day{
  background-color: #fff;
  color: #000;
}
.dark{
  background-color: #100c2a;
  color: #fff;
}
.title {
  font-size: 30px;
}
.selectBox {
  font-size: 14px;
}
.totalStateitag {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
}
.StateItem {
  display: flex;
  margin: 4px 6px;
  width: 30%;
    font-size: 14px;
}
.StateItemColor {
  display: flex;
}
.colorState {
    width: 25px;
    border-radius: 4px;
    height: 14px;
}
.boxTotal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
  overflow: auto;
  height: 200px;
}
.headerchart1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
}

// table
.table {
  border: 0px solid darkgray;
  overflow: auto;
  height: 100%;
  font-size: 12px;
}
.tr {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    width: 100%;
}
.td {
  height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 4px;
  width: 23%;
}
.anat{
  width: 100px;
  white-space: nowrap;
  animation:move 8s  linear infinite normal;
}
@keyframes move {
  0% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(-30%);
  }
}
.amoutchargeDark {
  // background-color: #100c2a;
}
.amoutchargeDay {
  // background-color: #ffffff;
}
.el-button {
  // margin-right: 10px;
}
.stateCircle {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 30px;
}
.statesingel {
  background-color: #f9f9f9;
}
.stateDouble {
  background-color: #e0e8ef;
}
a {
  // color: #000;
}
.stateTaol {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stateDark {
  background-color: #170f4a;
}
.statesDark {
  background: #211c3f;
}
.aDark {
  color:  #aaa49d !important;
}
.aDay {
  color: #1668ff !important
}
.state {
  width: 8px;
  height: 8px;
  border-radius: 40px;
}
</style>
